<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
    <style type="text/css">
        body,input,div,p,{margin: 0;padding: 0;}
        body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
        .content{width: 550px; margin: 0 auto;}
        .content img{ float: left; width: 150px;}
        .r{float: left; width: 400px;}
        input[name="changeBook"]{
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px; font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }
        input[name="season"]{
            width: 50px; text-align: center;
        }
    </style>
</head>
<body>
        <script  type="text/javascript">
            function changeLink(){
                   document.getElementById("node").innerHTML="搜狐";
            }
            function all_input(){
                  var aInput=document.getElementsByTagName("input");
                   var sStr="";
                  for(var i=0;i<aInput.length;i++){
                        sStr+=aInput[i].value+"<br />";
                   }
                    document.getElementById("s").innerHTML=sStr;
            }
            function s_input(){
                  var aInput=document.getElementsByName("season");
                  var sStr="";
                   for(var i=0;i<aInput.length;i++){
                        sStr+=aInput[i].value+"<br />";
                    }
                   document.getElementById("s").innerHTML=sStr;
            }
            </script>
            </head>
            <body>
              <div id="node">新浪</div>
              <input name="b1" type="button" value="改变层内容" onclick="changeLink();" 
              /><br />
              <br /><input name="season" type="text" value="春" />
              <input name="season" type="text" value="夏" />
              <input name="season" type="text" value="秋" />
              <input name="season" type="text" value="冬" />
              <br /><input name="b2" type="button" value="显示input内容" onclick= 
              "all_input()" />
              <input name="b3" type="button" value="显示season内容" onclick="s_input()" />
              <p id="s"></p>
            </body>
            
<!-- <div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button" onclick="altermouse();" /><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容" onclick= "all_input()" />
        <input name="b3" type="button" value="四季名称" onclick="s_input()" />
        <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
        <p id="replace"></p>
    </div>
</div>
<script  type="text/javascript">
    function altermouse(){
        document.getElementById("book").innerHTML="现象级全球畅销书";
    }
    function all_input(){
        var aInput=document.getElementsByTagName("input");
        var sStr="";
        for(var i=0;i<aInput.length;i++){
            sStr+=aInput[i].value+"&nbsp;&nbsp;";
        }
        document.getElementById("replace").innerHTML=sStr;
    }
    function s_input(){
        var aInput=document.getElementsByName("season");
        var sStr="";
        for(var i=0;i<aInput.length;i++){
            sStr+=aInput[i].value+"&nbsp;&nbsp;";
        }
        document.getElementById("replace").innerHTML=sStr;
    }
    function clearAll(){
        document.write("");
    }
</script> -->
</body>
</html>